<template>
    <div class="list">
        <el-row>
            <el-col :span="12" :offset="18">
                <el-button type="primary" icon="plus" @click="onAddQuestion">添加题目</el-button>
                <el-button type="primary"  @click="downloadExl">导出</el-button>
                <a href="" :download="downloadName" id="hf"></a>
            </el-col>
        </el-row>
        <div class="divline"></div>

        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 99%" align='center'>
            <!--类型，特殊处理-->
            <el-table-column label="类型"
                :prop="type.info.prop" 
                :label="type.info.label"
                :align="type.style.align"
                :width="type.style.width"
                :formatter="formatterType"
                :sortable="type.info.sortable">
            </el-table-column>

            <el-table-column v-for="item in fields"
                :prop="item.info.prop" 
                :label="item.info.label"
                :align="item.style.align"
                :width="item.style.width"
                :sortable="item.info.sortable">
            </el-table-column>

            <el-table-column label="操作" v-if="checkLevel()">
                <template scope='scope'>
                    <el-tooltip content="编辑题目" placement="left">
                        <el-button type="info"   icon='edit'   size="mini" @click='onEditQuestion(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="预览试题" placement="top">
                        <el-button type="info" icon='document' size="mini" @click='previewQuestion(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="查看代码" placement="bottom">
                        <el-button type="info" icon='document' size="mini" @click='previewCode(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除试题" placement="right">
                         <el-button type="danger" icon='delete' size="mini" @click='onDeleteQuestion(scope.row)'></el-button>
                    </el-tooltip>
                </template>
                </el-table-column>            
        </el-table>

        <!-- 添加 -->
        <el-dialog :title="questionForm.title" v-model="addFormVisible">
            <el-form :model="questionForm" ref="questionForm" style="width: 80%" label-width="30%">
                <el-form-item prop="type" label="选择题型">
                    <el-select v-model="questionForm.type" :disabled="questionForm.isupdate" placeholder="请选择题型">
                        <el-option v-for="item in questionTypes()" 
                            :key="item.value"
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="main" label="题干" :rules="[{required: true, message: '请输入题干', trigger: 'blur'}]">
                    <el-input placeholder="请输入题干" v-model="questionForm.main" type="textarea" :rows="1"></el-input>
                </el-form-item>
                <el-form-item prop="remark" label="备注" :rules="[{required: false}]">
                    <el-input placeholder="请输入备注" v-model="questionForm.remark" type="textarea" :rows="1"></el-input>
                </el-form-item>
                <div v-if="questionForm.type >= 4">
                    <el-checkbox  v-model="questionForm.hasScore">是否有评分</el-checkbox>
                    <el-input v-if="questionForm.hasScore" v-model="questionForm.score" placeholder="请输入评分"></el-input>
                </div>

                <el-form-item v-else
                    v-for="(option, index) in questionForm.options"
                    :label="'选项 ' + (index + 1)"
                    :key="option.key"
                    :prop="'options.' + index + '.value'"
                    :rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
                >
                    <template>
                        <el-input v-model="option.value" placeholder="请输入选项">
                            <el-button slot="append" icon="delete2" @click.prevent="removeOption(option)"></el-button>                            
                        </el-input>
                        <el-checkbox v-model="option.checked">选中输入</el-checkbox>
                        <el-checkbox v-model="option.hasScore">是否有评分</el-checkbox>
                        <el-input v-if="option.hasScore" v-model="option.score" placeholder="请输入评分,默认为0分"></el-input>
                    </template>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('questionForm')">提交</el-button>
                    <el-button @click="addOption" v-if="questionForm.type < 4">新增选项</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
<!--预览问题-->
        <el-dialog title="预览问题" v-model="questionVisible">
            <p class='question-p-info'>问题类型:<span class='question-span-text'>{{formatterTypeByNumber(questionData.type)}}</span></p>
            <p class='question-p-info'>问题题干:<span class='question-span-text'>{{questionData.main}}</span></p>
            <div v-if="questionData.type < 4 && questionData.options.length > 0">
            <p class='question-p-info'>问题选项:</p>
            <div v-for="(option,index) in questionData.options">
                <p class='option-p-question'>
                    <span class='question-info-text'>选项{{index + 1}}:{{option.value}}</span>
                    <span v-if="option.hasScore" class='question-sorce-text'>{{option.score}}分</span>
                    <span v-if="option.checked" class='question-sorce-text'>选中输入,输入提示文案为{{questionData.remark}}</span>
                </p>
            </div>
            </div>
        </el-dialog>
<!--查看代码-->
         <el-dialog title="查看代码" v-model="codeVisible">
            <p class='code-gray-text'>{{codeData.code}}</p>
            <p class='code-red-text'>id(int):题目id</p>
            <p class='code-red-text'>type(int):题目类型(1单选2多选3判断4问答5选择日期6选择时间7选择数字)</p>
            <p class='code-red-text'>main(string):题干
            <p class='code-red-text'> createdAt(string):题目创建时间</p>
            <p class='code-red-text'>updatedAt(string):题目最后修改时间</p>
            <p class='code-red-text'>remark(string):选中某选项需要用户输入信息的提示文案</p>
            <p class='code-red-text'>options(string):选项描述</p>
            <p class='code-red-text'>--id(int):选项id</p>
            <p class='code-red-text'>--value(string):选项内容</p>
            <p class='code-red-text'> --checked(stirng):是否选中该选项需要用户输入信息          </p>
            <p class='code-red-text'> --hasScore(boolean):选项是否有评分</p>
            <p class='code-red-text'> --score(string):选项评分</p>
        </el-dialog>
    </div>
</template>

<script>
    import QuestionsJs from './Questions.js';
    module.exports=QuestionsJs;
</script>

<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .option-p-question{
       margin-top:10px;
      margin-left:10px;
  }
  .question-p-info{
      color:#222;
      margin-top:10px;
      margin-left:10px;
  }
  .question-span-text{
      color:#999;
      margin-left:10px;
  }.question-info-text{
      color:#000;
      margin-left:10px;
  }.question-sorce-text{
      color:#f00;
      margin-left:10px;
  }.code-red-text{
      color:#f00;
      margin-left:10px;
  }.code-gray-text{
      color:#666;
      margin-left:10px;
  }
</style>